<!doctype html>
<html>

	<head>
		<meta charset="UTF-8" />
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/mui.css" />
		<!--图标文件引入-->
		<link rel="stylesheet" type="text/css" href="css/x-style.css" />

		<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style>
		.user-pic {
			width: 30px;
			height: 30px;
			border-radius: 30px;
			overflow: hidden;
			margin-top: 7px;
		}
		
		#sysmess i {
			font-size: 24px;
			line-height: 45px;
		}
		
		.sysmess-tips {
			position: absolute;
			top: 10px;
			right: 10px;
			display: inline-block;
			width: 6px;
			height: 6px;
			border-radius: 50%;
			background-color: red;
		}
	</style>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-pull-left"><img src="images/user.png" class="user-pic"></a>
			<h1 class="mui-title">首页</h1>
			<span class="mui-pull-right" id="sysmess"><i class="iconfont">&#xe668;</i><b class="sysmess-tips"></b></span>
		</header>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" data-id="home">
				<span class="mui-icon iconfont">&#xe647;</span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" data-id="active">
				<span class="mui-icon iconfont">&#xe604;</span>
				<span class="mui-tab-label">活动</span>
			</a>
			<a class="mui-tab-item" data-id="news">
				<span class="mui-icon iconfont">&#xe610;</span>
				<span class="mui-tab-label">行情</span>
			</a>
		</nav>
		<!-- 底部nav-->
		<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {

				mui.init();

				mui.plusReady(function() {
					//预加载消息页面
					var messagesList = mui.preload({
						url: 'html/main/sysmess.html',
						id: 'sysmess', //默认使用当前页面的url作为id
					});
					//打开消息页面

					$("#sysmess").bind("tap", function() {
						console.log("请求成功");
						mui.openWindow({
							url: 'html/main/sysmess.html',
							id: 'sysmess'
						})
					});

					//储存页面
					var subInfos = [{
						url: 'html/main/home.html',
						id: 'home'
					}, {
						url: 'html/main/activeList.html',
						id: 'active',
					}, {
						url: 'html/main/newsList.html',
						id: 'news'
					}];
					var subStyles = {
						top: '45px',
						bottom: '51px'
					};

					// 根据id查询子页面的信息
					var getSubInfoById = function(infoList, id) {
						var result = null;
						for(var i = 0, len = infoList.length; i < len; i++) {
							var _info = infoList[i];
							if(_info.id === id) {
								result = _info;
								break;
							}
						}
						return result;
					};

					var mainWv = plus.webview.currentWebview();
					var titleEL = document.querySelector('.mui-title');
					var activeTab = '';

					// 默认只加载首页webview
					var homeWv = plus.webview.create(subInfos[0].url, subInfos[0].id, subStyles);
					mainWv.append(homeWv);
					activeTab = subInfos[0].id;

					// 点击切换，动态创建其它webview；
					mui('.mui-bar-tab').on('tap', 'a.mui-tab-item', function(e) {
						var _self = this;
						var targetTab = _self.getAttribute('data-id');
						if(targetTab === activeTab) {
							return;
						}
						titleEL.innerText = _self.querySelector('.mui-tab-label').innerText;
						var _subWv = plus.webview.getWebviewById(targetTab);
						// 若webview不存在，则创建；
						if(!_subWv) {
							var _subInfo = getSubInfoById(subInfos, targetTab);
							_subWv = plus.webview.create(_subInfo.url, _subInfo.id, subStyles);
							mainWv.append(_subWv);
						}
						_subWv.show();
						// 隐藏之前的webview
						plus.webview.getWebviewById(activeTab).hide('none');
						activeTab = targetTab;
					});
				});

			})
		</script>
	</body>

</html>